<!DOCTYPE>
<html>
<head>
    <title>MarkerCluster</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=D76BZ-GDP34-A47UZ-XGFC5-I662F-PJFXM"></script>
    <style type="text/css">

        .tg {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .tg td {
            font-family: Arial, sans-serif;
            font-size: 14px;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: black;
        }

        .tg th {
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: normal;
            padding: 10px 5px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            word-break: normal;
            border-color: black;
        }

        .tg .tg-0lax {
            text-align: left;
            vertical-align: top
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            /*position: absolute;*/
            /*left: 320px;*/
            min-width: 500px;
            min-height: 800px;
            /*border: 1px solid #ff0000;*/
        }

        /*#panel {*/
        /*position: relative;*/
        /*width: 300px;*/
        /*height: 400px;*/
        /*overflow: auto;*/
        /*border: 1px solid #000000;*/
        /*}*/

        /*#panel2 {*/
        /*position: relative;*/
        /*top:500px;*/
        /*width: 300px;*/
        /*height:400px;*/
        /*overflow: auto;*/
        /*border: 1px solid #000000;*/
        /*}*/

        #attributeList li {
            border-bottom: 1px dashed #999999;
            padding: 5px 5px;
            line-height: 20px;
        }
    </style>
</head>
<body onload="window.init()">

<table class="tg" style="undefined;table-layout: fixed; width: 100%">
    <colgroup>
        <col style="width: 25%">
        <col style="width: 50%">
        <col style="width: 25%">
    </colgroup>
    <tr style="height:50vh">
        <td >
            <iframe style="height:100%;width:100%"  frameborder="0" scrolling="no"
                    src="http://localhost/webroot/decision/view/report?viewlet=demo%2Fanalytics%2F%5B7edf%5D%5B8ba1%5D%5B5dee%5D%5B989d%5D.cpt"></iframe>
        </td>
        <td  rowspan="2">
            <div id="map_canvas">
            </div>
        </td>
        <td >
            <iframe width="25vw" frameborder="0" scrolling="no" height="50vw"
                    src="http://fine.cenfortune.com/webroot/decision/view/form?viewlet=demo%2Fanalytics%2F%5B6708%5D%5B9500%5D%5B552e%5D%5B8868%5D.frm"></iframe>
        </td>
    </tr>
    <tr style="height:50vh">
        <td class="tg-0lax"></td>
        <td class="tg-0lax"></td>
    </tr>
</table>


<hr/>
</div>
<script type="text/javascript">
    var markerIndex = 0;
    var map;

    function $(a) {
        return document.getElementById(a);
    }
    var data = [
        [24.493999, 118.050204],
        [24.492949, 118.027997],
        [24.479826, 118.016324],
        [24.505305, 118.051129],
        [24.516091, 118.134167],
        [24.505305, 118.051129],
        [24.486412, 118.039667],
        [24.469774, 118.122236],
        [24.501096, 118.115971],
        [24.479538, 118.017695],
        [24.479962, 118.034019]
    ];

    window.init = function () {

        var Map = qq.maps.Map;
        var Marker = qq.maps.Marker;
        var LatLng = qq.maps.LatLng;
        var Event = qq.maps.event;

        var MarkerImage = qq.maps.MarkerImage;
        var MarkerShape = qq.maps.MarkerShape;
        var MarkerAnimation = qq.maps.MarkerAnimation;
        var Point = qq.maps.Point;
        var Size = qq.maps.Size;
        var ALIGN = qq.maps.ALIGN;

        var MVCArray = qq.maps.MVCArray;
        var MarkerCluster = qq.maps.MarkerCluster;
        var Cluster = qq.maps.Cluster;
        var MarkerDecoration = qq.maps.MarkerDecoration;

        var forEach = function (array, fun) {
            for (var i = 0, l = array.length; i < l; ++i) {
                if (fun(array[i], i) === false) {
                    return false;
                }
            }
        };

        var latlng = new LatLng(24.479962, 118.034019);
        var options = {
            'zoom': 11,
            'center': latlng,
            'mapTypeId': "roadmap"
        };

        var map = new Map($('map_canvas'), options);

        var infoWin = new qq.maps.InfoWindow({
            map: map
        });

        var markers = new MVCArray();
        var markerCluster;

        function createCluster() {
            for (var i = 0; i < data.length; i++) {
                (function (i) {
                    var latLng = new LatLng(data[i][0], data[i][1]);
                    var decoration = new MarkerDecoration(i, new Point(0, -5));
                    var anchor = new qq.maps.Point(6, 6),
                            size = new qq.maps.Size(24, 24),
                            origin = new qq.maps.Point(0, 0),
                            icon = new qq.maps.MarkerImage('img/center.gif', size, origin, anchor);
                    var marker = new Marker({
                        icon: icon,
                        'position': latLng,
                        'content': '测试',
                        map: map
                    });
                    qq.maps.event.addListener(marker, 'click', function () {
                        infoWin.open();
                        infoWin.setContent('<div style="text-align:center;white-space:' +
                                'nowrap;margin:10px;">这是第 ' +
                                i + ' 个标注<iframe src="http://www.baidu.com">...百度</iframe> </div>');
                        infoWin.setPosition(latLng);
                    });
                    markers.push(marker);
                })(i);
            }

            markerClusterer = new MarkerCluster({
                map: map,
                minimumClusterSize: 2, //默认2
                markers: markers,
                zoomOnClick: true, //默认为true
                gridSize: 30, //默认60
                averageCenter: true, //默认false
                maxZoom: 18, //默认18
            });

            Event.addListener(markerClusterer, 'clusterclick', function (evt) {
                // writeLog("mouse event", eventType);
                var ss = evt;
            });
        };

        createCluster();


        var imgPath = "./images/";
        var Styles = {
            "People": [
                {
                    icon: new MarkerImage(imgPath + "people35.png", new Size(35, 35), new Point(0, 0), new Point(16, 0)),
                    text: new MarkerDecoration('<font style="color:#ff00ff;font-size:10px;font-weight:bold;">{num}</font>', new Point(0, 5))
                }
            ],
            "Conversation": [
                {
                    icon: new MarkerImage(imgPath + "conv30.png", new Size(30, 27), new Point(0, 0), new Point(3, 0)),
                    text: new MarkerDecoration('<font style="color:#ff00ff;font-size:10px;font-weight:bold;">{num}</font>', new Point(0, -2))
                }
            ]
        };


        var maker_add;

        function addMarker(index) {
            var latLng = new LatLng(24.479962, 118.034019);
            var decoration = new MarkerDecoration(index, new Point(0, -5));
            maker_add = new Marker({
                'position': latLng,
                decoration: decoration,
                map: map
            });
            markers.push(maker_add);

            markerClusterer.addMarker(maker_add);
        }

        var markers_add = [];

        function addMarkers() {
            var bounds = map.getBounds();
            var sw = bounds.getSouthWest();
            var ne = bounds.getNorthEast();
            var lngSpan = Math.abs(sw.getLng() - ne.getLng());
            var latSpan = Math.abs(ne.getLat() - sw.getLat());
            for (var i = 0; i < 100; i++) {
                var position = new qq.maps.LatLng(ne.getLat() - latSpan * (Math.random() * 0.95), sw.getLng() + lngSpan * (Math.random() * 0.95));

                var decoration = new MarkerDecoration(i, new Point(0, -5));
                var makeradd = new Marker({
                    'position': position,
                    decoration: decoration,
                    map: map
                });
                markers_add.push(makeradd);
            }

            markerClusterer.addMarkers(markers_add);
        }

        function removeMarker() {
            markerClusterer.removeMarker(maker_add);
        }

        function removeMarkers() {
            markerClusterer.removeMarkers(markers_add);
        }

        function clearMarkers() {
            markerClusterer.clearMarkers();
        }

        function setMarkerClusterOption(key, value) {
            markerClusterer.set(key, value);
        }

        var setKeyHandle = {
            'gridSize': 'setGridSize',
            'maxZoom': 'setMaxZoom',
            'averageCenter': 'setAverageCenter'
        };

        var getKeyHandle = {
            'gridSize': 'getGridSize',
            'maxZoom': 'getMaxZoom',
            'averageCenter': 'getAverageCenter'
        };

        var gridSize = $("gridSize");
        Event.addDomListener(gridSize, "change", function () {
            setMarkerClusterOption("gridSize", parseInt(this.value));
        });

        var maxZoom = $("maxZoom");
        Event.addDomListener(maxZoom, "change", function () {
            setMarkerClusterOption("maxZoom", this.value ? parseInt(this.value) : null);
        });

        var addmarker = $("addMarkerBt");
        Event.addDomListener(addmarker, "click", function () {
            markerIndex++;
            addMarker(markerIndex);
        });

        var removeMarkerb = $("removeMarkerBt");
        Event.addDomListener(removeMarkerb, "click", function () {
            removeMarker();
        });

        var addmarker = $("addMarkersBt");
        Event.addDomListener(addmarker, "click", function () {
            addMarkers();
        });

        var removeMarkerb = $("removeMarkersBt");
        Event.addDomListener(removeMarkerb, "click", function () {
            removeMarkers();
        });


        var clearMarkerb = $("clearMarkersBt");
        Event.addDomListener(clearMarkerb, "click", function () {
            clearMarkers();
        });

        var minimumClusterSize = $("minimumClusterSize");
        Event.addDomListener(minimumClusterSize, "change", function () {
            setMarkerClusterOption("minimumClusterSize", parseInt(this.value));
        });

        var averageCenter_true = $("averageCenter_true");
        Event.addDomListener(averageCenter_true, "click", function () {
            setMarkerClusterOption("averageCenter", true);
        });

        var averageCenter_false = $("averageCenter_false");
        Event.addDomListener(averageCenter_false, "click", function () {
            setMarkerClusterOption("averageCenter", false);
        });

        var zoomOnClick_true = $("zoomOnClick_true");
        Event.addDomListener(zoomOnClick_true, "click", function () {
            setMarkerClusterOption("zoomOnClick", true);
        });

        var zoomOnClick_false = $("zoomOnClick_false");
        Event.addDomListener(zoomOnClick_false, "click", function () {
            setMarkerClusterOption("zoomOnClick", false);
        });

        var stylesSelect = $("styles");
        Event.addDomListener(stylesSelect, "change", function () {
            setMarkerClusterOption("styles", Styles[this.value] ? Styles[this.value] : null);
        });
    };

</script>
</body>
</html>